/* 为每个部分添加相应的样式 */
.header {
	display: flex;
	align-items: center;
	padding: 10rpx 20rpx;
	background-color: #ffffff;

	&-logo {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	&-search {
		flex: 1;
		margin-right: 20rpx;
		padding: 0 10rpx;

		input {
			width: 100%;
			height: 60rpx;
			background-color: #f5f5f5;
			border-radius: 30rpx;
			padding: 0 20rpx;
			font-size: 28rpx;
		}
	}

	&-icons {
		display: flex;
		justify-content: space-between;
		width: 180rpx;

		.icon-item {
			width: 50rpx;
			height: 50rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}

/* 新人专享区域 */
.new-user-offer {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 20rpx 20rpx 0;
	box-sizing: border-box;

	.offer-image {
		width: 100%;
		height: 300rpx;
		object-fit: contain;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20rpx;
		width: 100%;
		padding: 0 20rpx 20rpx;
		box-sizing: border-box;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}

		.description {
			font-size: 24rpx;
			color: #666;
			line-height: 1.5;
			text-align: center;
			margin-bottom: 20rpx;
		}

		.login-button {
			width: 100% !important;
			background-color: #000 !important;
			color: #fff !important;
			font-size: 28rpx !important;
			height: 80rpx !important;
		}
	}
}

/* 功能图标区 */
.function-icons {
	padding: 20rpx;

	.icon-wrapper {
		width: 80rpx;
		height: 80rpx;
		border: 1px solid #e0e0e0;
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.grid-text {
		font-size: 20rpx;
		color: #666666;
		margin-top: 10rpx;
	}
}

/* 活动广告区 */
.activity-ads {
	display: flex;
	justify-content: space-between;
	padding: 20rpx;
	height: 520rpx;

	.ad-column {
		width: calc(50% - 10rpx);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.ad-item {
		border: 1px solid #e0e0e0;
		border-radius: 16rpx;
		position: relative;

		&.large {
			width: calc(50% - 10rpx);
			height: 100%;
		}

		&.small {
			height: 100%;
		}

		.large-ad-content {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 100%;
			padding: 20rpx;
		}

		.small-ad-content {
			display: flex;
			flex-direction: column;
			padding: 40rpx 0 0 20rpx;

			.coin-logo {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.ad-text {
			display: flex;
			flex-direction: column;

			.ad-title {
				font-size: 28rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			.ad-description {
				font-size: 24rpx;
				color: #666;
				line-height: 1.2;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				line-clamp: 2;
				/* 添加标准属性以提高兼容性 */
			}
		}

		.yellow-text {
			color: #FFD700;
		}

		.ad-image {
			width: 200rpx;
			height: 200rpx;
			align-self: flex-end;
			margin-top: auto;
		}

		.ad-page {
			position: absolute; // 确保使用绝对定位
			right: 10rpx; // 右侧距离
			bottom: 10rpx; // 底部距离
			font-size: 20rpx;
			color: #999;
			background-color: rgba(255, 255, 255, 0.7);
			padding: 2rpx 6rpx;
			border-radius: 10rpx;
		}
	}
}

/* 最新消息 */
.latest-news {
	display: flex;
	align-items: center;
	padding: 10rpx 20rpx;
	margin: 20rpx;
	border-radius: 10rpx;

	.news-swiper {
		flex: 1;
		height: 40rpx;
		margin: 0 20rpx;
	}

	.news-item {
		font-size: 24rpx;
		line-height: 40rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* 币种列表 */
.coin-list {
	padding: 20rpx;

	.coin-type {
		margin-bottom: 15rpx;
	}

	.coin-group {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	.coin-item {
		display: flex;
		justify-content: space-between;
		width: 48%;
		margin-bottom: 10rpx;
	}
}

/* 新币预告 */
.new-coin-announcement {
	padding: 20rpx;

	.announcement-title {
		font-size: 38rpx;
		margin-bottom: 10rpx;
		margin-bottom: 20rpx;
	}

	.announcement-content {
		border: 1px solid #e0e0e0;
		border-radius: 16rpx;
		padding: 20rpx 20rpx 0 20rpx;

		.top-row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.row {
				display: flex;
			}

			.coin-info {
				display: flex;
				flex-direction: column;
				margin-left: 30rpx;

				.coin-name {
					font-size: 32rpx;
					font-weight: bold;
				}

				.coin-description {
					font-size: 20rpx;
					color: #666;
					margin-top: 10rpx;
				}

				.coin-tag {
					.tag {
						font-size: 20rpx;
						color: #666;
						background-color: #f5f5f5;
						padding: 10rpx;
					}

					margin-top: 10rpx;
				}
			}

			.coin-logo {
				width: 80rpx;
				height: 80rpx;
			}
		}

		.bottom-row {
			display: flex;
			justify-content: space-between;
			margin-top: 10rpx;
			border-top: 1px solid #e0e0e0;
			padding: 20rpx 0;
			font-size: 24rpx;
			color: #666;
		}
	}
}

.follow-container {
	padding: 0 20rpx;

	.follow-title {
		font-size: 38rpx;
		margin-bottom: 10rpx;
	}

	.follow-swiper {
		height: 200rpx;

		.follow-item {
			border: 1px solid #e0e0e0;
			border-radius: 16rpx;
			padding: 20rpx;
			margin: 20rpx 0;

			.follow-item-content {
				display: flex;
				justify-content: space-between;

				.follow-avatar-left {
					display: flex;
					align-items: center;

					.avatar {
						width: 80rpx;
						height: 80rpx;
						margin-right: 20rpx;
					}

					.avatar-info {
						display: flex;
						flex-direction: column;

						.avatar-name {
							font-size: 32rpx;
							font-weight: bold;
							display: flex;
							align-items: center;

							.avatar-level {
								width: 25rpx;
								height: 25rpx;
								margin-left: 10rpx;
							}
						}

						.avatar-increase {
							font-size: 24rpx;
							color: #666;
							display: flex;
							align-items: center;

							.avatar-fnum-text {
								color: #FFD700;
								margin-left: 10rpx;
							}
						}
					}
				}

				.follow-avatar-right {
					font-size: 24rpx;
					background-color: #000;
					height: 24rpx;
					line-height: 24rpx;
					color: #fff;
					padding: 15rpx 30rpx;
					border-radius: 50rpx;
				} 
			}
		}
	}
}